<template>
    <view class="contain">
        <div class="btn-content">
            <button class="wx-login" @click="login">微信一键登录</button>
            <div class="phone-btn">手机号登录/注册</div>

            <div class="txt" @click="contractCheck = !contractCheck">
              <wd-icon name="circle1" size="22px" color="#FFFFFF" v-if="!contractCheck"></wd-icon>
              <wd-icon name="check-outline" size="22px" color="#FFFFFF" v-else></wd-icon>
              我已阅读并同意《用户协议》
            </div>
        </div>
    </view>
</template>

<script lang="ts" setup name="login">
import { ref } from 'vue'
import { useAuthStore } from '@/state/modules/user';
import { useRouter } from 'uni-mini-router';
const router = useRouter();
const authStore = useAuthStore();
const contractCheck = ref(true);

// login登录
function login() {
  if(!contractCheck.value) {
    uni.showToast({
      title: '请先阅读并同意用户协议',
      icon: 'none',
    });
    return;
  }

    authStore
        .login()
        .then((res) => {
            console.log(res, 'wi使用了');
            router.push({
                name: 'home',
            });
        })
        .catch(() => {});
}
</script>

<style lang="scss" scoped>
.contain {
    width: 100%;
    height: 100vh;
    background: linear-gradient(180deg, #ff5f4d 0%, #f6892d 100%);
    border-radius: 0rpx 0rpx 0rpx 0rpx;

    .btn-content {
      width: 100%;
        position: absolute;
        bottom: 300rpx;
        display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 30rpx;
        .wx-login {
            width: 608rpx;
            height: 112rpx;
            background: #222222;
            border-radius: 22rpx 22rpx 22rpx 22rpx;
            font-weight: bold;
            font-size: 36rpx;
            color: #ffffff;
            line-height: 112rpx;
            text-align: center;
        }
        .phone-btn {
            width: 608rpx;
            height: 112rpx;
            border: 2rpx solid #ffffff;
            border-radius: 22rpx 22rpx 22rpx 22rpx;
            font-weight: bold;
            font-size: 36rpx;
            color: #ffffff;
            line-height: 112rpx;
            text-align: center;
        }
        .txt {
          width: 608rpx;
            display: flex;
            align-items: center;
            justify-content: flex-start;
          gap: 10rpx;
            .wd-icon-circle1 {
                color: #ffffff;
              background: #ffffff;
            }
            .wd-icon-check-outline {
                color: #ffffff;
            }
        }
    }
}
</style>
